<template>
	<view>
		<!-- 商品详情轮播大图 -->
		<swiperImage :resdata="swiperList" height="750" isPreview></swiperImage>
		<!-- 基础详情 -->
		<base-info :details="details"></base-info>
		<!-- 滚动商品特性 -->
		<scroll-attrs :list="goodsAttrs"></scroll-attrs>
		<!-- 属性选择 -->
		<view class="p-2">
			<view class="rounded border bg-light-secondary">
				<uni-list-item>
					<view class="d-flex">
						<text class="mr-2 text-muted">已选</text>
						<text>火焰红 64G 标配</text>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="d-flex">
						<text class="mr-2 text-muted">配送</text>
						<text class="mr-2">北京 东城区</text>
						<text class="main-text-color">现配</text>
					</view>
				</uni-list-item>
				<uni-list-item extraWidth="15%">
					<view class="d-flex">
						<view class="d-flex text-muted font a-center mr-2">
							<view class="iconfont icon-finish main-text-color"></view>
							小米自营
						</view>
						<view class="d-flex text-muted font a-center mr-2">
							<view class="iconfont icon-finish main-text-color"></view>
							小米发货
						</view>
						<view class="d-flex text-muted font a-center mr-2">
							<view class="iconfont icon-finish main-text-color"></view>
							七天无理由退货
						</view>	
					</view>
				</uni-list-item>
			</view>
		</view>
		<!-- 横向滚动评论 外层 w620*w380 头像：w70*h70  图片 h115-->
		<common-list :list="commonsList"></common-list>
		<!-- 商品详情 -->
		<!-- 热门推荐 -->
	</view>
</template>

<script>
	import swiperImage from "@/components/index/swiper-image.vue"
	import baseInfo from "@/components/detail/base-info.vue"
	import scrollAttrs from "@/components/detail/scrool-attrs.vue"
	import commonList from "@/components/detail/common-list.vue"
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	export default {
		components: {
			swiperImage,
			baseInfo,
			scrollAttrs,
			commonList,
			uniListItem
		},
		data() {
			return {
				commonsList: [{
						userpic: '/static/images/userpic.png',
						username: '王雪东',
						create_time: '2019-3-8',
						goods_num: '123',
						context: '我是评论内容',
						imgLists: ['/static/images/demo/demo6.jpg', '/static/images/demo/demo6.jpg',
							'/static/images/demo/demo6.jpg'
						]
					},
					{
						userpic: '/static/images/userpic.png',
						username: '王雪东',
						create_time: '2019-3-8',
						goods_num: '123',
						context: '我是评论内容',
						imgLists: ['/static/images/demo/demo6.jpg', '/static/images/demo/demo6.jpg',
							'/static/images/demo/demo6.jpg'
						]
					},
					{
						userpic: '/static/images/userpic.png',
						username: '王雪东',
						create_time: '2019-3-8',
						goods_num: '123',
						context: '我是评论内容',
						imgLists: ['/static/images/demo/demo6.jpg', '/static/images/demo/demo6.jpg',
							'/static/images/demo/demo6.jpg'
						]
					},
					{
						userpic: '/static/images/userpic.png',
						username: '王雪东',
						create_time: '2019-3-8',
						goods_num: '123',
						context: '我是评论内容',
						imgLists: ['/static/images/demo/demo6.jpg', '/static/images/demo/demo6.jpg',
							'/static/images/demo/demo6.jpg'
						]
					}
				],
				swiperList: [{
						src: 'https://i8.mifile.cn/v1/a1/6d13e060-d5c5-e610-88d0-80816fa2b0ce.webp'
					},
					{
						src: 'https://i8.mifile.cn/v1/a1/aff0b715-e63a-68f3-91b0-46a22543555e.webp'
					}
				],
				details: {
					title: '小米MIX3 6GB+128GB',
					desc: '磁动力滑盖全面屏 / 前后旗舰AI双摄 / 四曲面彩色陶瓷机身 / 高效10w无线充电',
					price: 3500
				},
				goodsAttrs: [{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					},
					{
						icon: 'icon-cpu',
						title: 'CPU',
						desc: '蛟龙845八核'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>

</style>